<template>
  <div class="com_editor_container">
    <div class="e_topNav">
      <div style="flex: 1"></div>
      <steps :current="current" type="navigation" style="flex: 1" size="small">
        <step v-for="item in steps" :key="item.title" :title="item.title" />
      </steps>
      <div class="e_button_group">
        <Button @click="prev"><Icon type="left" />上一步</Button>
        <Button @click="next">下一步<Icon type="right" /></Button>
        <Button type="primary" @click="verify_editor">确定</Button>
        <Button @click="cancel">取消</Button>
      </div>
    </div>
    <div class="e_content">
      <BaseInfo
        v-show="current === 0"
        ref="baseInfo"
        :data="baseInfoData"
        :editType="editType"
      />
      <customField
        v-show="current === 1"
        ref="customField"
        :data="customFieldData"
        :editType="editType"
      />
      <EditorChart
        ref="editor"
        v-show="current === 2"
        :fields="fields"
        :requestConfig="requestConfig"
        :data="editorMapData"
        :editType="editType"
      />
    </div>
  </div>
</template>
<script>
import BaseInfo from "./components/baseInfo.vue";
import customField from "./components/customField.vue";
import EditorChart from "./editorChart.vue";
import EventBus from "./components/eventBus";
import message from "ant-design-vue/lib/message";

import Icon from "ant-design-vue/lib/icon";
import Steps from "ant-design-vue/lib/steps";
import Button from "ant-design-vue/lib/button";
import "ant-design-vue/lib/button/style/css";
import "ant-design-vue/lib/icon/style/css";
import "ant-design-vue/lib/input/style/css";
import "ant-design-vue/lib/table/style/css";
import "ant-design-vue/lib/steps/style/css";
import "ant-design-vue/lib/message/style/css";

const { Step } = Steps;
const { Group } = Button;
const ButtonGroup = Group;
export default {
  components: {
    Steps,
    Step,
    Button,
    ButtonGroup,
    Icon,
    BaseInfo,
    customField,
    EditorChart,
  },
  props: {
    data: {
      type: Object,
    },
    editType: {
      type: Number,
      default: 1, //1-新增、2-编辑、3查看
    },
    requestConfig: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      current: 0,
      fields: [],
      allNodeIds: [], //用于验证是否所有的节点都返回了验证结果
      allVerifyInfos: [], //所有节点的验证信息
      steps: [
        {
          title: "基础信息",
          description: "流程基本信息",
        },
        {
          title: "表单字段",
          description: "添加流程依赖字段",
        },
        {
          title: "流程设计",
          description: "流程设计器",
        },
      ],
    };
  },

  computed: {
    baseInfoData() {
      if (this.editType === 1) {
        return {};
      } else {
        let data = { ...this.data };
        delete data.formData;
        delete data.flowTemplateJson;
        return data;
      }
    },

    customFieldData() {
      if (this.editType === 1) {
        return [];
      } else {
        let data = JSON.parse(this.data.formData);
        return data;
      }
    },

    editorMapData() {
      if (this.editType === 1) {
        return {};
      } else {
        let data = JSON.parse(this.data.flowTemplateJson);
        return data;
      }
    },
  },
  watch: {
    current(val) {
      if (val === 2) {
        if (this.$refs.customField) {
          this.fields = this.$refs.customField.getData() || [];
        }
      }
    },
    allVerifyInfos(val) {
      console.log("allVerifyInfos=>", val);
      if (val.length === this.allNodeIds.length) {
        // 若所有的验证都受到回复
        // 判断是否有错误
        let notPass = this.allVerifyInfos.filter((e) => e.pass === false);
        if (notPass.length > 0) {
          // 有验证未通过的提示
          message.warning("请确认流程是否编辑完整");
        } else {
          // 都通过了验证进行
          this.confirm();
        }
      }
    },
  },

  mounted() {
    EventBus.$on("VERIFY_CALLBACK", this.verify_callback);
  },

  beforeDestroy() {
    EventBus.$off("VERIFY_CALLBACK");
  },

  methods: {
    next() {
      if (this.current === 0 && this.$refs.baseInfo) {
        let v = this.$refs.baseInfo.verify();
        if (v === null) return;
        v.then((isOk) => {
          if (isOk) {
            this.current++;
          }
        });
      } else if (this.current === 2) {
        return;
      } else {
        this.current++;
      }
    },
    prev() {
      if (this.current === 0) return;
      this.current--;
    },

    verify_callback(verifyInfo) {
      this.allVerifyInfos.push(verifyInfo);
    },

    // 校验
    verify_editor() {
      if (this.$refs.editor) {
        let editorData = this.$refs.editor.getData() || {};
        let allNodeIds = [];
        loopObj(editorData);
        this.allNodeIds = [...allNodeIds];
        this.allVerifyInfos = [];
        console.log("allNodeIds=>", allNodeIds);
        function loopObj(obj) {
          allNodeIds.push(obj.nodeId);
          for (let key in obj) {
            if (key === "conditionNodes" && obj.conditionNodes.length > 0) {
              for (let v of obj.conditionNodes) {
                loopObj(v);
              }
            }
            if (key === "childNode" && obj.childNode) {
              loopObj(obj.childNode);
            }
          }
        }
        EventBus.$emit("VERIFY");
      }
    },

    confirm() {
      let baseInfo = {};
      let customFields = [];
      let editorData = {};
      if (this.$refs.baseInfo) {
        baseInfo = this.$refs.baseInfo.getData() || {};
      }
      if (this.$refs.customField) {
        customFields = this.$refs.customField.getData() || [];
      }
      if (this.$refs.editor) {
        editorData = this.$refs.editor.getData() || {};
      }

      baseInfo.formData = JSON.stringify(customFields);
      baseInfo.flowTemplateJson = JSON.stringify(editorData);
      // console.log("确定==》", JSON.stringify(baseInfo));
      this.$emit("confirm", baseInfo);
      // console.log(JSON.stringify(baseInfo));
      // let url = "http://10.114.14.204:11077/api/workflow/Engine/FlowEngine";
      // axios
      //   .post(url, baseInfo, {
      //     headers: { "x-user-token": this.requestConfig.token },
      //   })
      //   .then(
      //     (res) => {
      //       console.log("res=>", res);
      //     },
      //     (err) => {
      //       console.log("err=>", err);
      //     }
      //   );
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>
<style scoped>
.com_editor_container {
  position: relative;
  background-color: #ebeef5;
  height: 100%;
}
.e_topNav {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #ffffff;
  z-index: 999;
}
.e_button_group {
  box-sizing: border-box;
  flex: 1;
  text-align: right;
  padding-right: 40px;
}
.e_button_group button {
  margin-right: 10px;
}

.e_content {
  box-sizing: border-box;
  padding-top: 90px;
  padding-bottom: 10px;
  /* background-color: red; */
  height: 100%;
  overflow-y: auto;
}

.e_content::-webkit-scrollbar {
  width: 5px;
}
.e_content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #ddd;
}
</style>